<template>
	<view>
		<uParse :content="htmlString" @preview="preview" @navigate="navigate" />
	</view>
</template>



<script>
	import API from '../../common/api.js';
	import uParse from '../../components/uParse/src/wxParse.vue'
	export default {
		components: {
			uParse
		},
		data() {
			return {
				htmlString: "",
				baseURL:API.baseURL,
				n_id:'',
			}
		},
		onLoad(event) {
			this.n_id = event.setting;
			this.getDetail();
			
		},
		methods: {
			preview(src, e) {
				// do something
				
			},
			navigate(href, e) {
				// 如允许点击超链接跳转，则应该打开一个新页面，并传入href，由新页面内嵌webview组件负责显示该链接内容
				// console.log("href: " + href);
				uni.showModal({
					content : "点击链接为：" + href,
					showCancel:false
				})
			},
			getDetail(id) {
				var _this = this;
				uni.request({
					url:API.getSettings,
					data:{setting:this.n_id},
					method:"GET",
					success: (res) => {
						_this.htmlString = res.data.settings;
					},
					fail: () => {
						
					}
				})
			},
		}
	}
</script>

<style>
	@import url("../../components/uParse/src/wxParse.css");
	page{
		background:#FFFFFF;
	}
	.banner {
		height: 360upx;
		overflow: hidden;
		position: relative;
		background-color: #ccc;
	}

	.banner-img {
		width: 100%;
	}

	.banner-title {
		max-height: 84upx;
		overflow: hidden;
		position: absolute;
		left: 30upx;
		bottom: 30upx;
		width: 90%;
		font-size: 32upx;
		font-weight: 400;
		line-height: 42upx;
		color: white;
		z-index: 11;
	}

	.article-meta {
		padding: 20upx 40upx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		color: gray;
	}

	.article-text {
		font-size: 26upx;
		line-height: 50upx;
		margin: 0 20upx;
	}

	.article-author,
	.article-time {
		font-size: 30upx;
	}

	.article-content {
		padding: 0 30upx;
		overflow: hidden;
		font-size: 30upx;
		/* margin-bottom: 30upx; */
		border-bottom:20upx solid #f7f7f7;
	}
	.uni-padding-wrap{
		width:100%;
		padding: 0;
	}
	.uni-comment-list{
		/* position:relative; */
		padding: 30upx;
		padding-bottom:36upx;
		border-bottom:1upx solid #e5e5e5;
	}
	.uni-comment-body{
		width:585upx;
		/* position:absolute; */
		top: 0;
		right:0;
	}
	.uni-comment-top{
		color: #6b6b6b;
		font-size:26upx;
	}
	.uni-comment-top>.zan{color:#6b6b6b;font-size:26upx;float:right;width:100upx;}
	.uni-comment-top image{
		width:30upx;
		height:30upx;
		/* vertical-align:bottom; */
		margin-right:10upx;
	}
	.uni-comment-content{
		color: #222222;
		font-size:30upx;
	}
	.uni-comment-date{
		color: #222222;
		font-size:22upx;
	}
	.uni-comment-face{
		width:80upx;
		height:80upx;
		margin-right:35upx;
	}
	.card_title{
		font-size:32upx;
		color:#222222;
		padding:35upx 26upx;
		border-bottom:1upx solid #e5e5e5;
	}
	.del_title{
		padding:0 24upx;
		margin-bottom:24upx;
		border-bottom:1upx solid #e5e5e5;
	}
	.del_title_title{
		font-size: 38upx;
		font-weight: bold;
		color:#222222;
		padding:40upx 0;
		line-height:1.5;
	}
	.del_title_tab{
		padding-bottom:26upx;
		color: #999999;
		font-size:24upx;
		overflow: hidden;
	}
	.del_title_tab>view{float: left;width:33.33333%;text-align:center;}
	.del_title_tab>view:last-child{text-align:right;}
	.del_title_tab>view:first-child{text-align:left;}
	
	
	.input_bottom{
		height:68upx;	
		background:#FFFFFF;
		position:fixed;
		bottom:0;
		left:0;
		width:100%;
		display:flex;
		padding:15upx 25upx;
		box-shadow:#CCCCCC 20upx 20upx 20upx 20upx; 
	}
	.input_bottom input{
		/* width:510upx; */
		width:430upx;
		height:68upx;
		border:1upx solid #e8e8e8;
		border-radius:34upx;
		background:#f4f4f5;
		padding-left:20upx;
		padding-right:90upx;
	}
	.input_bottom>.more>image{
		width:54upx;
		height:54upx;
		margin-left:24upx;
		margin-top:10upx;
	}
	.input_bottom_box{
		position:relative;
	}
	.input_bottom_box .expression{
		position:absolute;
		width:40upx;
		height:40upx;
		right:40upx;
		top:16upx;
	}
	.pinglun{margin-bottom:68upx;}
</style>
